import React from "react"

import { TabBar } from "antd-mobile"
import { Route, withRouter } from "react-router-dom"
import Move from "./Move/Move"
import Wymv from "./Move/wymv/wymv"
import Fanchang from "./Move/wymv/fanchang"
import XianChang from "./Move/wymv/xianchang"
import GooBy from "./Move/wymv/gooby"
import Look from "./Move/wymv/look"

class Mv extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: '/move',
      hidden: false,
      fullScreen: false,
    };
  }
  renderContent(location) {
    // console.log(location);
    let { pathname } = location;
    this.setState({
      selectedTab: pathname
    })
  }
  componentDidMount() {
    this.renderContent(this.props.location)
  }
  componentWillReceiveProps(nextProps) {
    this.renderContent(nextProps.location)
  }
  Pai(){
    this.props.history.push({pathname: "/Move/paihang"})
  }
  render() {
    return (
      <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '50%', top: 0 } : { height: "100%" }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          hidden={this.state.hidden}
          tabBarPosition="top"
        >
          <TabBar.Item
            title="推荐"
            key="Move"
            icon={<div style={{
              width: '5px',
              height: '5px',
              background: 'url() center center /  21px 21px no-repeat'
            }}
            />
            }
            selectedIcon={<div style={{
              width: '5px',
              height: '5px',
              background: 'url() center center /  21px 21px no-repeat'
            }}
            />
            }
            selected={this.state.selectedTab === '/move'}

            onPress={() => {
              this.props.history.push("/move")
              this.setState({
                selectedTab: '/move',
              });
            }}
            data-seed="logId"
          >
            <Route path="/move" component={Move} />
            <Route path="/" exact component={Move} />
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '5px',
                height: '5px',
                background: 'url() center center /  21px 21px no-repeat'
              }}
              />
            }
            selectedIcon={
              <div style={{
                width: '5px',
                height: '5px',
                background: 'url() center center /  21px 21px no-repeat'
              }}
              />
            }
            title="LOOK直播"
            key="look"

            selected={this.state.selectedTab === '/Look'}

            onPress={() => {
              this.props.history.push("/Look")
              this.setState({
                selectedTab: '/Look',
              });
            }}
            data-seed="logId1"
          >
            <Route path="/Look" component={Look} />
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '5px',
                height: '5px',
                background: 'url() center center /  21px 21px no-repeat'
              }}
              />
            }
            selectedIcon={
              <div style={{
                width: '5px',
                height: '5px',
                background: 'url() center center /  21px 21px no-repeat'
              }}
              />
            }
            title="告白の夜"
            key="gooby"

            selected={this.state.selectedTab === '/gooby'}
            onPress={() => {
              this.props.history.push("/gooby")
              this.setState({
                selectedTab: '/gooby',
              });
            }}
            data-seed="logId1"
          >
            <Route path="/gooby" component={GooBy} />
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '5px',
                height: '5px',
                background: 'url() center center /  21px 21px no-repeat'
              }}
              />
            }
            selectedIcon={
              <div style={{
                width: '5px',
                height: '5px',
                background: 'url() center center /  21px 21px no-repeat'
              }}
              />
            }
            title="现场"
            key="xianchang"

            selected={this.state.selectedTab === '/xianchang'}
            onPress={() => {
              this.props.history.push("/xianchang")
              this.setState({
                selectedTab: '/xianchang',
              });
            }}
            data-seed="logId1"
          >
            <Route path="/xianchang" component={XianChang} />
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '5px',
                height: '5px',
                background: 'url() center center /  21px 21px no-repeat'
              }}
              />
            }
            selectedIcon={
              <div style={{
                width: '5px',
                height: '5px',
                background: 'url() center center /  21px 21px no-repeat'
              }}
              />
            }
            title="翻唱"
            key="fanchang"

            selected={this.state.selectedTab === '/fanchang'}
            onPress={() => {
              this.props.history.push("/fanchang")
              this.setState({
                selectedTab: '/fanchang',
              });
            }}
            data-seed="logId1"
          >
            <Route path="/fanchang" component={Fanchang} />
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '5px',
                height: '5px',
                background: 'url() center center /  21px 21px no-repeat'
              }}
              />
            }
            selectedIcon={
              <div style={{
                width: '5px',
                height: '5px',
                background: 'url() center center /  21px 21px no-repeat'
              }}
              />
            }
            title="标签"
            key="fanchang"

            selected={this.state.selectedTab === '/wymv'}
            onPress={() => {
              this.props.history.push("/wymv")
              this.setState({
                selectedTab: '/wymv',
              });
            }}
            data-seed="logId1"
          >
            <Route path="/wymv" component={Wymv} />
          </TabBar.Item>
        </TabBar>
        
      </div>
    );
  }
}



export default Mv



